<template>
  <div class="container">
    <!-- 新增按钮 -->
    <div class="containerTop">
      <div class="containerTopAdd">
        <el-button type="text" @click="open('add')">新增房间+</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 对话框 -->
    <div class="dialog">
      <el-dialog
        :title="type === 'add' ? '新增房间' : '编辑房间'"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form
          ref="ruleForm"
          :model="form"
          clearable
          label-width="80px"
          :rules="rules"
        >
          <!-- 酒店名称 -->
          <el-form-item label="酒店名称" prop="name">
            <el-select v-model="form.value" placeholder="请选择酒店">
              <el-option
                v-for="item in form.options"
                :key="item.value"
                :lable="item.jdName"
                :value="item.jdName"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 房间名称 -->
          <el-form-item label="房间名称" prop="region">
            <el-input v-model="form.name" class="roomName"></el-input>
          </el-form-item>

          <!-- 房间号 -->
          <el-form-item label="房间号" prop="num">
            <el-input v-model="form.number" class="roomNumber"></el-input>
          </el-form-item>

          <!-- 房间价格 -->
          <el-form-item label="房间价格" prop="price">
            <el-input v-model="form.price" class="roomPrice"></el-input>
          </el-form-item>

          <!-- 房间图片 -->
          <el-form-item label="房间图片" class="roomPic">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >保存</el-button
            >
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="jdName" label="酒店名称" width="250">
        </el-table-column>
        <el-table-column fixed prop="jdAddress" label="酒店地点" width="300">
        </el-table-column>
        <el-table-column fixed prop="fjName" label="酒店房间名称" width="300">
        </el-table-column>
        <el-table-column prop="fjPrice" label="房间价格" width="130">
        </el-table-column>
        <el-table-column prop="fjImg" label="房间展示" width="200">
          <img :src="tableData.fjImg" alt="" />
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="400">
          <template>
            <el-button type="text" size="small" @click="open('edit')"
              >编辑</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="pageChange"
      :current-page="tableForm.page"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="tableForm.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      class="blockPage">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  roomListApi,
  groggeryListApi,
  addRoomApi,
} from "@/api/roomInformation";

export default {
  created() {
    this.getList(); // 获取所有的酒店and房间
    this.gethotalList(); // 获取所有的酒店
  },
  mounted() {},

  data() {
    return {
      total:0, //房间总数量
      // 对话框内容
      dialogVisible: false, // 对话框按钮
      type: "", //dialog标题
      form: {
        options: [], //所有酒店
        value: "", //酒店名称
        name: "", //房间名称
        number: "", //房间号
        price: "", //房间价格
        imageUrl: "", //房间图片
      },
      //查询所有酒店的房间
      tableForm: {
        limit: 10,
        page: 1,
      },
     
      // 所有酒店and所有房间
      tableData: {
        data:[],
        total:0
      },

      //查询所有酒店
      hotalForm: {
        limit: 10,
        page: 1,
      },

      rules: {
        //酒店名称
        name: [
          { required: true, message: "请输入酒店名称", trigger: "blur" },
          {
            min: 4,
            max: 20,
            message: "长度在 4 到 20 个字符",
            trigger: "blur",
          },
        ],
        //酒店房间
        region: [
          { required: true, message: "请选择房间名称", trigger: "change" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        //房间号
        num: [
          { required: true, message: "请填写房间号", trigger: "change" },
          {
            min: 1,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        //房间号
        price: [
          { required: true, message: "请填写价格", trigger: "change" },
          { min: 1, max: 8, message: "长度在 1 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    open(type) {
      this.type = type;
      this.dialogVisible = true;
    },

    //上传图片
    handleAvatarSuccess(res, file) {
      this.form.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 获取所有的酒店and房间
    async getList() {
      const res = await roomListApi(this.tableForm);
      this.tableData = res.records;
      // console.log(this.tableData,'888');
    },
    // 获取所有的酒店
    gethotalList() {
      groggeryListApi(this.hotalForm).then((res) => {
        console.log(res, "1111");
        this.form.options = res.list;
      });
    },
    //对话框按钮
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //点击保存后的提交
    submitForm() {
      //兜底校验
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return;
        //通过后发请求
        //  await addRoomApi({})
        //提示用户
        //  this.$message.success('添加成功')
      });
    },
    //删除房间
    delete() {},
    //分页
    pageChange(page) {
      this.tableFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList()
    },
  },
  computed: {},
  wacth: {},
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  .containerTop {
    width: 100%;
    height: 50px;
    // background-color: pink;
    .containerTopAdd {
      color: #fff;
      width: 100px;
      height: 50px;
      // background-color: #0c8aff;
      text-align: center;
      line-height: 50px;
      border-radius: 8px;
      border: 1px solid #047cf2;
    }
  }

  //分页样式
  .block{
    width: 100%;
    height: 50px;
    // background-color: pink;
    // float: right;
    display: flex;
    justify-content: end;
  }
  // 对话框样式

  //房间名称
  .roomName {
    width: 213px;
  }
  //房间号
  .roomNumber {
    width: 213px;
  }
  .roomPrice {
    width: 213px;
  }

  //上传图片样式开始
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    // background-color: blue;
    border: 1px solid #dde0e7;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 98px;
    height: 98px;
    display: block;
  }
  //上传图片样式结束
}
</style>